﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="list.aspx.cs" Inherits="web.list" %>
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="css/main.css" rel="Stylesheet" type="text/css" />
    <script src="javascript/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="javascript/jquery-1.7.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
           $("#btnShowID").attr("disabled", "disabled");   
            $("#btnShowID").removeClass("btnStyle").addClass("btnInvalidStyle"); 
            $("tr:even").addClass("even");
            $("tr:odd").addClass("odd");
            clickSelectRow();
            selectAllCheckBox();
            checkAllSelect();
            hoverChangeColor();
        });
       
     
       
       function CreateMenu(){
            var _menuName = $('#txtMenuName').val();
            var _menuLink = $('#txtMenuLink').val();
            var _menuTarget= $('#txtMenuTarget').val();
            var ajaxMethodName = "AddMenu";
            $.ajax({
                type: "POST",
                url: "/ajax/ajaxhandler.ashx",
                data: {

                    methodname: ajaxMethodName,
                    menuName: _menuName,
                    menuLink: _menuLink,
                    menuTarget: _menuTarget                   
                },
                dataType: 'text',
                success: function(response) {
                    if (response == 1) {
                        $("#successResult").show();
                        return;
                    } else {
                        $("#faildRestult").show();
                         return;
                    }
                },
                error: function(error) {
                    alert(error);
                    return false;
                }
            });
           
       }
       function createPopUp(){
            $("#PopUpBg-flv").show();
            $("#PopUpDiv-flv").show();
            return false;
       }
       function closePopUp(){
         $("#PopUpBg-flv").hide();
         $("#PopUpDiv-flv").hide();
         
         this.location = this.location;
       }
       
       
       //鼠标滑过后变色。
       function hoverChangeColor(){
            $("#<%=GridView1.ClientID %> > tbody > tr >td ").hover(function(){
                $(this).parents("tr").toggleClass("hover");
           });            
       }
       
       //全选，全选后背景变色；反选后还原原来颜色。
       function selectAllCheckBox(){                
            $("#chkAll").click(function () {
                $('#<%=GridView1.ClientID %> > tbody > tr > td > input:checkbox').attr("checked", this.checked);   
                
                //如果CheckBox被选中则激活按钮
                if($("#chkAll").attr("checked")){
                     $("#btnShowID").removeAttr("disabled");     
                     $("#btnShowID").removeClass("btnInvalidStyle").addClass("btnStyle");    
                     $("#<%=GridView1.ClientID %> > tbody > tr").first().nextAll().addClass("selected");
                          
                }else{
                   $("#btnShowID").attr("disabled", "disabled");  
                   $("#btnShowID").removeClass("btnStyle").addClass("btnInvalidStyle");       
                   $("#<%=GridView1.ClientID %> > tbody > tr").first().nextAll().removeClass("selected");                
                }                  
            });
        }
       
       //点击CheckBox时，判断是否全部选中，如果选中则对应的全选的CheckBox也选中，反之亦然。
       function checkAllSelect(){
            $("#<%=GridView1.ClientID %> > tbody > tr > td > input:checkbox").click(function () {
                //获取所有选中的checkbox元素
                checkboxSelectCount();
                IsCheckedRemoveDisabled();
                
            });       
       }
       
       //任何CheckBox被选中，按钮就会被激活
       function IsCheckedRemoveDisabled(){       
            var checkedItems = $("#<%=GridView1.ClientID %> > tbody > tr > td > input:checkbox:checked").length;                
            if(checkedItems > 0){                    
                 $("#btnShowID").removeAttr("disabled");    
                 $("#btnShowID").removeClass("btnInvalidStyle").addClass("btnStyle");                              
            }else{
               $("#btnShowID").attr("disabled", "disabled");   
               $("#btnShowID").removeClass("btnStyle").addClass("btnInvalidStyle");                    
            }
       }     
       
       //给行添加Click事件，不包括第一行，如果全部选中，则标题的全选Checkbox也选中。
       function clickSelectRow(){        
            $("#<%=GridView1.ClientID %> > tbody > tr").first().nextAll().click(function () {                
                //判断td标记的背景颜色和body的背景颜色是否相同;
                if ($(this).hasClass("selected") ) {                    
                    //如果相同，CheckBox.checked=true;
                    $(this).removeClass("selected");
                    $(this).children().first().children().attr("checked", false);    
                    checkboxSelectCount();                                 
                    IsCheckedRemoveDisabled();
                } else {
                    //如果不同,CheckBox.checked=false;
                    $(this).addClass("selected");
                    $(this).children().first().children().attr("checked", true);       
                    //获取所有checkbox元素
                    checkboxSelectCount();
                    IsCheckedRemoveDisabled();
                }
            });
      }
      
      //统计Checkbox选中的数量
      function checkboxSelectCount(){      
            var expression1 = $("#<%=GridView1.ClientID %> > tbody > tr > td > input:checkbox:checked");
            //获取所有checkbox元素
            var expression2 = $("#<%=GridView1.ClientID %> > tbody > tr > td > input:checkbox");
            var hasChecked = $(expression1).length == $(expression2).length;
            $("#chkAll").attr("checked", hasChecked);
      }

    </script>
    <style type="text/css">
        #PopUpBg-flv{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
        #PopUpDiv-flv{position:absolute;width:600px; display:none; height:auto; z-index:100;top:200px; margin-left:100px; margin-top:-20px;  background:#ffffff; height:300px;}
        
        .even
        {
            background-color: #f7f7f7;
            
        }
        .odd
        {
            background-color: #ffffff;
            
        }
        .hover
        {
            background: #d7e3f6; /*这个将是鼠标高亮行的背景色*/
           
        }
        .selected
        {
            background-color: #dcf8a8; /*这个将是选中高亮行的背景色*/
         
        }
    
    </style>
</head>
<body>
    
    
    <form id="form1" runat="server">
    <%--<input type="checkbox" onclick="this.indeterminate=true">--%>
    <div class="main_div">
        <div class="horizontalBar">
            
        </div>
        <div class="btnDiv">
            <asp:Button CssClass="btnStyle" ID="btnShowID" runat="server" 
                Text="查看选中ID" onclick="btnShowID_Click" />
             <input type="button" value="Add New Menu" onclick="createPopUp()" class="btnStyle" />
        </div>
        <div>
        <asp:GridView ID="GridView1" runat="server" EmptyDataText="暂无数据" 
                CssClass="GirdViewStyle" Width="100%" 
            AutoGenerateColumns="False" onrowdatabound="GridView1_RowDataBound" 
                DataKeyNames="id">
            <RowStyle Height="30px" HorizontalAlign="Center" />          
            
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                         <input type="checkbox" id="chkAll" />
                    </HeaderTemplate>
                   <ItemTemplate>
                         
                       <asp:CheckBox ID="CheckSingle" runat="server" />
                   </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="菜单编号" DataField="id" />
                <asp:BoundField HeaderText="菜单名称" DataField="menuname" />
                <asp:BoundField HeaderText="菜单链接" DataField="menulink" />
                <asp:BoundField HeaderText="菜单目标" DataField="menutarget" />
                <asp:TemplateField>
                    <HeaderTemplate><asp:Label ID="Label12" runat="server" Text='创建日期' /></HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"menudate","{0:yyyy年MM月dd日 HH:mm:ss}") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="Label1" runat="server" Text='操作数据' />
                    </HeaderTemplate>
                   <ItemTemplate>
                        <asp:LinkButton ID="LinkButton2" Text="删 除" runat="server" />
                        <a onclick="createPopUp()" href='#<%#Eval("id") %>' />修 改</a>
                   </ItemTemplate>                   
                </asp:TemplateField>
            </Columns>
            
        </asp:GridView>
        </div>
        <div class="bottomDiv">
            
            <webdiyer:aspnetpager id="AspNetPager1" runat="server" CssClass="pages" CurrentPageButtonClass="cpb"
        PagingButtonSpacing="5px" onpagechanged="AspNetPager1_PageChanged"
            showcustominfosection="Left" 
        CustomInfoHTML="&nbsp;&nbsp;&nbsp;&nbsp;总记录数：%RecordCount%，总页数：%PageCount%，当前第%CurrentPageIndex%页" 
        urlpaging="True"  ShowNavigationToolTip="true" 
        UrlPageIndexName="pageindex" PageSize="15" 
                PageIndexBoxType="DropDownList" PagingButtonLayoutType="UnorderedList" 
                ShowPageIndexBox="Always" SubmitButtonText="Go" TextAfterPageIndexBox="页" 
                TextBeforePageIndexBox="转到" NumericButtonCount="5" AlwaysShow="True" 
                CustomInfoSectionWidth=""></webdiyer:aspnetpager>
        </div>
         
    </div>  
   <div id="PopUpBg-flv">
            
        </div>
        <div id="PopUpDiv-flv">
            <div>
                <a id="colsePopUp" onclick="closePopUp()">Close PopUp</a>               
            </div>
            <asp:TextBox ID="txtMenuName" runat="server" CssClass="txtBg"></asp:TextBox>
            <asp:TextBox ID="txtMenuLink" runat="server" CssClass="txtBg"></asp:TextBox>
            <asp:TextBox ID="txtMenuTarget" runat="server" CssClass="txtBg"></asp:TextBox>
          
            <input id="btnSubmit" type="button" value="button" onclick="CreateMenu()" />
            <div id="successResult" style="display:none;">
                Add success
            </div>
            <div id="faildRestult" style="display:none;">
                Add faild.
            </div>
        </div> 
         
    </form>
    
</body>
</html>
